<template>
  <div class="box">
    <div class="table">
      <!-- <div id="table1"></div> -->
      <div id="table2" style="display: flex">
        <div id="table2-1" style="width: 50%"></div>
        <div id="table2-2" style="width: 50%"></div>
      </div>
      <div id="table3"></div>
      <div id="table31"></div>
      <div id="table4"></div>
    </div>
    <div class="chat">
      <div class="chat-list">
        <div v-for="item in charList" :key="item">
          {{ item.name }}：
          <el-tag>{{ item.content }}</el-tag>
        </div>
      </div>

      <div class="chat-list">
        <div v-for="item in charList2" :key="item">
          {{ item.name }}：
          <el-tag>{{ item.content }}</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      charList: [
        {
          name: "胡启航",
          content: "人工智能技术到底用在了鞋履定制的哪些环节？",
        },
        {
          name: "黄浉浉",
          content: "有了AI技术，鞋履定制生产更方便了",
        },
        {
          name: "章佳怡",
          content: "AI图像识别的具体的应用流程又是怎么样的呀？",
        },
        {
          name: "邹雨露",
          content: "鞋垫的定制设计应该需要用到",
        },
        {
          name: "缪淑瑶",
          content: "现在门店都有脚型测量的，里面应该用到了很多AI技术",
        },
        {
          name: "许栩可",
          content: "图像识别技术？",
        },
        {
          name: "冯源 ",
          content: "脚型测量之类的",
        },
      ],
      charList2: [
        {
          name: "蒋陈磊",
          content: "应该用到了挺多AI技术的，但是具体的原理说不上来。",
        },
        {
          name: "胡嘉琦",
          content: "量脚定制，用了图像识别技术吧",
        },
        {
          name: "蒋伊甜",
          content: "现在都是自动化生产了，但是具体应用不太清楚？",
        },
        {
          name: "郑巨铭",
          content: "我感觉图像识别技术肯定有的，但是具体的应用不太清楚",
        },
        {
          name: "李艳芝",
          content: "不清楚，不清楚",
        },
        {
          name: "廖聊婧",
          content: "大数据分析，前面学习了爆款分析，这个对于鞋履定制也有用吧",
        },
        {
          name: "朱嘉颖",
          content: "不是很清楚",
        },
      ],
    };
  },
  mounted() {
    // this.getcharts1();
    this.getcharts2();
    this.getcharts3();
    this.getcharts31();
    this.getcharts4();
  },
  methods: {
    getcharts1() {
      const domMap = document.getElementById("table1");
      // 清除Echarts默认添加的属性
      domMap.removeAttribute("_echarts_instance_");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(domMap);

      // 柱状图配置
      var option = {
        title: {
          text: "图文融合创款设计鞋履",
          left: "center",
          textStyle: {
            fontSize: 26,
            color: "white",
          },
        },
        tooltip: {},
        legend: {
          data: ["分数"],
          right: 20,
          top: 20,
          textStyle: {
            fontSize: 18,
            fontWeight: "bold",
            color: "white",
          },
        },
        xAxis: {
          data: ["70-80分", "80-90分", "90以上"],
          axisLabel: {
            textStyle: {
              fontSize: 15,
              color: "white",
            },
          },
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
        },
        series: [
          {
            name: "分数",
            type: "bar",
            data: [8, 25, 10],
            barWidth: 80,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    getcharts2() {
      // 基于准备好的dom，初始化echarts实例
      const domMap1 = document.getElementById("table2-1");
      const domMap2 = document.getElementById("table2-2");
      // 清除Echarts默认添加的属性
      domMap1.removeAttribute("_echarts_instance_");
      domMap2.removeAttribute("_echarts_instance_");
      // 基于准备好的dom，初始化echarts实例
      var chart1 = echarts.init(domMap1);
      var chart2 = echarts.init(domMap2);

      var option1 = {
        title: {
          text: "AI图像识别技术了解情况",
          left: "center",
          textStyle: {
            color: "white",
            fontSize: 26,
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 90,
                name: "非常了解",
              },
              {
                value: 10,
                name: "比较了解",
              },
            ],
            radius: "50%",
            label: {
              fontSize: 18,
              fontWeight: "bold",
              formatter: "{b}:{d}%",
              color: "rgb(255, 255, 255)",
            },
          },
        ],
      };

      var option2 = {
        title: {
          text: "AI图像识别技术在鞋履定制中的应用场景与流程",
          left: "center",
          textStyle: {
            width: 300,
            fontSize: 26,
            overflow: "break",
            color: "white",
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 93,
                name: "不了解",
              },
              {
                value: 6,
                name: "了解一点",
                label: {
                  fontSize: 18,
                  fontWeight: "bold",
                  formatter: "{b}:{d}%",
                },
              },
              {
                value: 1,
                name: "非常了解",
              },
            ],
            radius: "50%",
            label: {
              fontSize: 18,
              fontWeight: "bold",
              formatter: "{b}:{d}%",
              color: "rgb(255, 255, 255)",
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      chart1.setOption(option1);
      chart2.setOption(option2);
    },

    getcharts3() { 
      const domMap = document.getElementById("table3");
      // 清除Echarts默认添加的属性
      domMap.removeAttribute("_echarts_instance_");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(domMap);

      // 饼图配置
      var option = {
        title: {
          text: "AI图像识别工具应用",
          left: "center",
          textStyle: {
            fontSize: 26,
            color: "white",
          },
        },
        tooltip: {},
        legend: {
          data: [
            "简单的AI图像识别应用",
            "足弓识别工具应用",
             "鞋楦识别工具应用",
          ],
          right: 10,
          top: 35,
          orient: "vertical",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold",
            color: "white",
          },
        },
        xAxis: {
          data: ['60-70分',"70-80分", "80-90分", "90以上"],
          axisLabel: {
            textStyle: {
              fontSize: 25,
              color: "white",
            },
          },
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
        },
        series: [
          {
            name: "简单的AI图像识别应用",
            type: "bar",
            data: [0,2, 18, 20],
            barWidth: 30,
          },
          {
            name: "足弓识别工具应用",
            type: "bar",
            data: [22, 10,8, 0],
            barWidth: 30,
          },
          {
            name: "鞋楦识别工具应用",
            type: "bar",
            data: [28, 7,5, 0],
            barWidth: 30,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getcharts31() {
      const domMap = document.getElementById("table31");
      // 清除Echarts默认添加的属性
      domMap.removeAttribute("_echarts_instance_");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(domMap);
      const option = {
        title: {
          text: '图像预处理掌握情况',
          left: "center",
          textStyle: {
            fontSize: 26,
            color: "white",
          },
        },
        series:{
          type: "pie",
            data: [
              {
                value: 0,
                name: "优秀",
              },
              {
                value: 5,
                name: "良好",
              },
              {
                value: 10,
                name: "一般",
              },
              {
                value: 25,
                name: "较差",
              },
            ],

            radius: "70%",
            label: {
              fontSize: 18,
              fontWeight: "bold",
              formatter: "{b}:{c}人",
              color: "rgb(255, 255, 255)",
            },
        }

      }

      myChart.setOption(option);
    },
    getcharts4() {
      const domMap = document.getElementById("table4");
      // 清除Echarts默认添加的属性
      domMap.removeAttribute("_echarts_instance_");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(domMap);

      var option = {
        title: {
          text: "不同AI图像识别技术的掌握情况",
          left: "center",
          textStyle: {
            fontSize: 26,
            color: "white",
          },
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 0,
                name: "优秀",
                label: {
                  fontSize: 18,
                  fontWeight: "bold",
                  formatter: "{b}:{c}人",
                },
              },
              {
                value: 1,
                name: "良好",
                label: {
                  formatter: "{b}:{c}人",
                  fontSize: 18,
                  fontWeight: "bold",
                },
              },
              {
                value: 15,
                name: "一般",
              },
              {
                value: 24,
                name: "较差",
              },
            ],
            radius: "70%",
            label: {
              fontSize: 18,
              fontWeight: "bold",
              formatter: "{b}:{d}%",
              color: "rgb(255, 255, 255)",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>


<style scoped lang="scss">
.box {
  margin: 0;
  padding: 0;
  background-color: #2d4351;
  padding-bottom: 20px;
}

.table {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;

  &>div {
    margin: 10px 15px;
    background-color: #324374;
    width: 690px;
    box-shadow: 0 0 10px rgb(34, 31, 38);
    border-radius: 5px;
    height: 500px;
  }
}

.chat {
  width: 99.3%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  background-color: #324374;
  margin: 0 10px;

  .chat-input {
    display: flex;

    .el-input {}

    .el-button {}
  }

  .chat-list {
    width: 95%;
    box-shadow: 0 0 10px rgb(34, 31, 38);

    color: white;
    padding: 20px;

    // border: {
    //   style: solid;
    //   width: 3px;
    //     color: rgb(89, 17, 117);
    //   radius: 10px;
    // }

    font-size: 30px;

    .el-tag {
      margin: 10px;
      height: 50px;
      font-size: 22px;
      font-weight: 900;
    }
  }
}
</style>
